<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 980px;
            margin: 0px auto;
            clear: both;
            height: 101px;
            position: relative;
        }

        .box .logo {
            padding-top: 20px;
            float: left;
            overflow: hidden;
        }

        .box .home {
            margin-left: 20px;
            width: 739px;
            height: 101px;
            line-height: 101px;
            float: left;
            z-index: 111;


        }

        .box .home .zi {
            float: left;
            position: relative;
            display: inline;
            cursor: pointer;
        }

        .box .home .zi h3 {
            float: left;
            display: block;
            padding: 0 15px;
            font-size: 15px;
            color: #777777;
            margin-right: 8px;
            transition: all 0.25s ease;
            font-family: "Microsoft YaHei", "微软雅黑";


        }

        .box .home .zi ul {
            transition: all 0.25s ease 0s;
            width: 166px;
            height: 0;
            left: 0;
            z-index: 999;
            top: 101px;
            position: absolute;
            background: #174fa4;
            line-height: 30px;
            overflow: hidden;

        }

        .box .home .zi ul li {
            zoom: 1;

            padding: 0px 0px 0px 15px;
            font-size: 14px;
            font-family: "Microsoft YaHei", "微软雅黑";
            color: #fff;
            transition: all 0.25s ease 0s;

        }

        .box .home .zi ul li:hover {
            transform: translateX(5px);
            transition: all 0.25s ease 0s;


        }
    </style>
</head>

<body>
    <div class="box">
        <div class="logo">
            <img src="./logo.jpg" alt="">
        </div>
        <div class="home">
            <div class="zi">
                <h3>首页</h3>
                <ul></ul>
            </div>

            <div class="zi">
                <h3>概况</h3>
                <ul>
                    <li> > 科技馆介绍</li>
                    <li> > 馆内资讯</li>
                    <li> > 通知公告</li>
                    <li> > 预算公开</li>
                </ul>
            </div>

            <div class="zi">
                <h3>楼层展览</h3>
                <ul>
                    <li> > 展馆一层</li>
                    <li> > 展馆二层</li>
                    <li> > 展馆三层</li>
                    <li> > 临时展览</li>
                </ul>
            </div>

            <div class="zi">
                <h3>科普活动</h3>
                <ul>
                    <li> > 科普大篷车</li>
                    <li> > 科普报告会</li>
                    <li> > 馆校结合</li>
                    <li> > 魅力科学课堂</li>
                    <li> > 科普表演剧</li>
                    <li> > 理论广角</li>
                    <li> > 创客训练营</li>
                    <li> > 数学实验室</li>

                </ul>
            </div>
            <div class="zi">
                <h3>影院音讯</h3>
                <ul>
                    <li> > 播放场次</li>
                    <li> > 影片介绍</li>
                    <li> > 影院介绍</li>
                </ul>
            </div>
            <div class="zi">
                <h3>科普志愿者</h3>
                <ul>
                    <li> > 志愿者管理办法</li>
                    <li> > 志愿者风采</li>
                    <li> > 网上申请</li>
                </ul>
            </div>
            <div class="zi">
                <h3>咨询服务</h3>
                <ul>
                    <li> > 开馆时间</li>
                    <li> > 失物招领</li>
                    <li> > 乘车路线</li>
                    <li> > 参观须知</li>
                    <li> > 联系我们</li>
                </ul>
            </div>
            <div class="zi">
                <h3>报名入口</h3>
                <ul>
                    <li> > 资源下载</li>
                    <li> > 科学运动会报名</li>
                    <li> > 科普大篷车报名</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        var h3s = document.querySelectorAll('.home > .zi > h3');
        var uls = document.querySelectorAll('ul');
        var qlis = document.querySelectorAll('.zi > ul > li');
        var zis = document.querySelectorAll('.zi');
        console.log(zis);

        function hg(a) {
            var num2 = uls[a].children.length; // 获取 点击第几个标题就获取标题下面l中的li的个数
            var lis = uls[a].querySelectorAll('li'); // 获取 点击第几个标题就获取标题下面l中的li
            for (let k = 0; k < qlis.length; k++) { // 执行前 清除所有行高 排他
                qlis[k].style.height = '0px';
            }
            for (let j = 0; j < num2; j++) { // 触碰哪个哪个下面的li加高度
                qlis[j].style.height = '34px';
            }
        }
        for (let i = 0; i < h3s.length; i++) {
            zis[i].onmouseenter = function () {
                for (let k = 0; k < uls.length; k++) {
                    zis[k].style.background = '';
                    h3s[k].style.color = '#777777';
                }
                zis[i].style.background = '#174fa4';
                h3s[i].style.color = '#fff';
                console.log(uls[i].children[0]);
                var num = uls[i].children.length * uls[i].children[0].offsetHeight;
                uls[i].style.height = num + 'px';
            }
            zis[i].onmouseleave = function () {
                uls[i].style.height = 0 + 'px';
            }
        }
    </script>
</body>

</html>